import { Button, Menu, Modal } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { request } from 'umi';
import EditRole from './edit'
import './roleList.less'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
export default (props) => {
    const requestsUrls = {
        list: "/sys/role/list",
        add: '',
        edit: '',
        delete: "/sys/menu/",
    };
    const editRef = useRef();
    const { selectKey, setselectKey } = props;
    const [list, setlist] = useState([]);
    const getList = () => {

        request(requestsUrls.list, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                // ...params
            }
        }).then((res) => {
            setlist(res?.data)
        })
    }
    useEffect(() => {
        getList();
    }, [])
    const deleteFn = (id) => {
        Modal.confirm({
            title: '确认删除？',
            content: '',
            onOk() {
                console.log('OK');

                request(`/sys/role/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    data: {
                        roleId: id,
                    },
                }).then(() => {
                    if (id == selectKey) {
                        setselectKey('');
                    }
                    getList();
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };
    return (
        <div>
            <Button onClick={() => editRef.current?.init()}>新增</Button>
            <div>
                <Menu
                    onClick={(e) => {
                        setselectKey(e.key);
                    }}
                    selectedKeys={[selectKey]}
                >
                    {list.map((item: any, i: number) => {
                        return (
                            <Menu.Item key={item.roleId}>
                                <div>
                                    <span style={{ marginLeft: '10px' }}>{item.roleName}</span>
                                </div>
                            </Menu.Item>
                        );
                    })}
                </Menu>
            </div>


            <EditRole
                ref={editRef}
                callback={() => {
                    getList();
                }}
            />
        </div>
    )
}